<template>
    <div id="app">
        <Header1 v-if="$route.meta.Header === 1"></Header1>
        <Header2 v-if="$route.meta.Header === 2"></Header2>
        <Header3 v-if="$route.meta.Header === 3"></Header3>
        <Header4 v-if="$route.meta.Header === 4" :title = "$route.meta.title"></Header4>
        <!-- 不同路由展示的地方 -->
        <router-view></router-view>
        <Footer v-show="$route.meta.footerShow"></Footer>
    </div>
</template>

<script>
import Footer from "@/components/Footer"
import Header1 from "@/components/Header1"
import Header2 from "@/components/Header2"
import Header3 from "@/components/Header3"
import Header4 from "@/components/Header4"
export default {
  name: 'App',
  components: {
    Footer,
    Header1,
    Header2,
    Header3,
    Header4
  }
}
</script>

<style scoped>
#app{
    background-color: #f5f5f5;
    min-width: 1200px;
    /*开启相对定位是为了让子元素绝对定位定位到body，不然会定位到显示器的第一视图*/
    position: relative;
    box-sizing: border-box;
    min-height: 100vh;
}
</style>
